<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<button>btn</button>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<script type="text/javascript">
		document.querySelector('ul').addEventListener('click', function(e) {
			// console.log(e.target);
			// console.log(e.currentTarget);
			if (!e.target.nodeName === 'LI') return;

			console.log(e.target.innerHTML);
		});

		document.querySelector('button').addEventListener('click', function(e) {
			let ul = document.querySelector('ul');

			let li = document.createElement('li');
			li.innerHTML = Math.random();

			ul.appendChild(li);

			// li.addEventListener('click', function(e) {
			// 	console.log(this.innerHTML);
			// })
		});

		// [...document.querySelectorAll('ul li')].forEach(li => {
		// 	li.addEventListener('click', function(e) {
		// 		console.log(this.innerHTML);
		// 	});
		// });
	</script>
</body>
</html>